<style type="text/css">

</style>
<el-dialog
        v-model="shareDialog.visible"
        title="{lang share_create}"
        align="center"
        width="800"
        max-width="100%"
        class="share-dialog"
        @open="getShareData"
        >
    <el-form
            ref="editFormRef"
            :model="ShareAddDialogForm"
            size="large"
            >
        <el-form-item label="{lang share_title}" prop="title">
            <el-input v-model="ShareAddDialogForm.title" placeholder="{lang share_title}"></el-input>
        </el-form-item>
        <el-form-item label="{lang share_times}" >
            <el-input-number v-model="ShareAddDialogForm.times" style="width:220px"></el-input-number>
            <el-text class="form-item-helper">{lang share_times_tip}</el-text>
        </el-form-item>
        <el-form-item label="{lang share_password}" prop="password">
            <el-input v-model="ShareAddDialogForm.password" placeholder="{lang share_password}" style="width:220px"></el-input>
            <el-text class="form-item-helper">{lang share_password_tip}</el-text>
        </el-form-item>
        <el-form-item label="{lang share_endtime}" >
            <el-date-picker
                    v-model="ShareAddDialogForm.fendtime"
                    type="date"
                    placeholder="{lang share_endtime}"></el-date-picker>
            <el-text class="form-item-helper">{lang share_endtime_tip}</el-text>
        </el-form-item>
        <el-form-item label="{lang share_perm}" prop="perm">
            <el-checkbox  v-model="ShareAddDialogForm.perm" name="perm">
                {lang download}
            </el-checkbox>
        </el-form-item>

        <el-form-item v-if="shareDialog.shareData.sid" label="{lang share_address}" style="flex-wrap: unset;">
            <div style="display: flex;flex: 1;">
                <el-input
                        v-model="shareDialog.shareData.shareurl"
                        :disabled="true"
                        @input="SettingAddressInput"
                        >

                </el-input>
                <div style="white-space: nowrap;margin-left: 12px;">
                    <el-button icon="CopyDocument" @click="RightCopyUrl(shareDialog.shareData.fshareurl)" plain>{lang copy_link}</el-button>
                    <el-popover
                            placement="top"
                            popper-class="qrcode-box"
                            :width="224"
                            :teleported="false"
                            @before-enter="TableGeturlqrcode(shareDialog.shareData.sid,true)"
                            trigger="hover">
                        <div v-loading="!shareDialog.shareData.isqrcode" style="width: 200px;font-size: 0;">
                            <el-image draggable="false" v-if="shareDialog.shareData.qrcodeurl" style="width: 200px; height: 200px" :src="shareDialog.shareData.qrcodeurl" fit="contain">
                                <template #error><div class="el-image__placeholder"></div></template>
                            </el-image>
                            <el-text tag="p" style="text-align: center;padding-top: 12px;">{lang qrcode_image_tip}</el-text>
                            <div v-if="shareDialog.shareData.qrcodeurl" class="download" @click="TableDownQrcodeurl(shareDialog.shareData.qrcodeurl)">
                                <div style="text-align: center;">
                                    <el-icon style="font-size: 22px;"><Download /></el-icon>
                                    <el-text tag="p" style="width: 100%;">{lang qrcode_download}</el-text>
                                </div>
                            </div>
                        </div>
                        <template #reference>
                            <el-button plain>
                                <template #icon>
                                    <el-icon>
                                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8z"></path><path d="M192 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2z" ></path><path d="M192 668.8l131.2 0 0 131.2-131.2 0 0-131.2Z"></path><path d="M633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6z"></path><path d="M700.8 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8z"></path><path d="M886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2z"></path><path d="M582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944z"></path><path d="M944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z" ></path></svg>
                                    </el-icon>
                                </template>
                                {lang qrcode_get}
                            </el-button>
                        </template>
                    </el-popover>

                </div>
            </div>
        </el-form-item>
    </el-form>

    <template #footer>
        <div style="display: flex;justify-content: space-between; ">
            <div  style="display: inline-flex">
                <el-button v-if="shareDialog.shareData.sid"  size="large" type="danger" @click="handelShareDelete(shareDialog.shareData.sid)" >{lang delete}</el-button>
            </div>
            <div  style="display: inline-flex">
                <el-button size="large" @click="shareDialog.visible = false">{lang cancel}</el-button>
                <el-button type="primary" size="large" :loading="shareDialog.shareAddBtnLoading" @click="handleShareDialogSubmit">{lang submit}</el-button>
            </div>
        </div>
    </template>
</el-dialog>
<script>
    const  ShareAddDialogMixin = {
        data() {
            return {
                shareDialog: {
                    title:'',
                    id:'',
                    stype:0,
                    visible: false,
                    shareAddBtnLoading:false,
                    shareData: {
                        sid:0
                    }
                },
                ShareAddDialogForm: {
                    id:'',
                    stype:'',
                    title:'',
                    times:0,
                    password:'',
                    fendtime:'',
                    perm:true,
                },
                rules: {
                    title: [
                        { required: true, message: '{lang share_title_empty}', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            getShareData() {
                let self = this;
                if(self.shareDialog.id==''){
                    return false;
                }
                axios.post('index.php?mod=shares&op=ajax&do=getShareDataById', {
                    id: self.shareDialog.id,
                    stype: self.shareDialog.stype,
                }).then(function (response) {
                    if (response.data.success) {
                        self.ShareAddDialogForm = response.data.data;
                        self.shareDialog.shareData = response.data.sharedata;
                    } else {
                        self.$message(response.data.msg);
                    }
                });
            },
            handleShareDialogSubmit() {
                let self = this;
                self.$refs.editFormRef.validate(async function(valid){
                    if (valid) {
                        self.shareAddBtnLoading = true;
                        let param={
                            id: self.ShareAddDialogForm.id,
                            stype: self.ShareAddDialogForm.stype,
                            title: self.ShareAddDialogForm.title,
                            times: self.ShareAddDialogForm.times,
                            password: self.ShareAddDialogForm.password,
                            fendtime: self.ShareAddDialogForm.fendtime,
                            perm: self.ShareAddDialogForm.perm?true:false,
                        }

                        axios.post('index.php?mod=shares&op=ajax&do=shareAddSubmit', param).then(function (response) {
                            if (response.data.success) {
                                self.shareDialog.shareData = response.data.data;
                                self.RightCopyUrl(response.data.data.fshareurl);
                                self.shareDialog.visible = false;
                            } else {
                                self.$message(response.data.msg);
                            }
                            self.shareAddBtnLoading = false;
                        });
                    }else{
                        self.$message.error('{lang submit_invalid_msg}');
                        return false;
                    }
                });
            },
            handelShareDelete(sid){
                let self=this;
                self.$messageBox.confirm('{lang share_delete_confirm}')
                    .then(()=>{
                        axios.post('index.php?mod=shares&&op=ajax&do=delete', {
                            id:sid
                        }).then(function(res){
                            //window.location.reload();
                            if(res.data.success){
                                self.$message({
                                    message: '{lang share_delete_success}',
                                    type: 'success',
                                });
                                self.shareDialog.visible=false;
                            }else{
                                self.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                });
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                     })
                    .catch(() => {
                       // self.$message.error('取消删除');
                    });

            },
            RightCopyUrl(url){
                const self = this;
                var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
                input.setAttribute('value', url);
                document.getElementsByTagName('body')[0].appendChild(input);
                document.getElementById('copyInput').select();
                document.execCommand('copy')
                self.$message({
                    message: '{lang copy_clipboard}',
                    type: 'success'
                });
                document.getElementById('copyInput').remove();
            },
            TableGeturlqrcode(sid){
                let self = this;
                axios.post('index.php?mod=shares&op=ajax&do=geturlqrcode', {
                    sid: sid,
                }).then(function (response) {
                    if (response.data.qrcode) {
                        self.shareDialog.shareData.isqrcode = true;
                        self.shareDialog.shareData.qrcodeurl = response.data.qrcode;
                    } else {
                        console.log('qrcode error');
                        //self.$message(response.data.msg);
                    }
                });
            },
            TableDownQrcodeurl(url){
                let a = document.createElement('a')
                a.href = url;
                a.download = '{lang qrcode}'
                a.click()
            },
        }
    }
</script>